<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SMValidator Tutor 2</title>
    <link rel="stylesheet" href="monokai-sublime.css">
    <link rel="stylesheet" href="style.css">
    <script src="highlight.pack.js"></script>
    <script src="../dist/SMValidator.js"></script>
</head>

<body>
    <form>
        <ol>
            <li>
                <p>所有东西都写在html里，无疑是自己给自己挖个深坑，不仅丑还难维护，所以你赶紧用js重写一遍</p>
                <pre><code class="html">
&lt;!--fields里的属性对应input的name，如果你有多个input的name都是test1，那么他们共用这个校验规则--&gt;
&lt;!--rule可以是String、Array和Function--&gt;
&lt;!--rule为String时，只能填校验规则名，例如number/email，不能填required和failCss等，因为他们是特性，只能作为test1的属性--&gt;
&lt;!--rule为Array时，数组的第一项是正则表达式，第二项是失败消息--&gt;
&lt;!--rule为Function时，函数返回true或失败消息，function(val){return true || 'fail message'}--&gt;
&lt;!--failCss/failHtml接收多个参数时以数组的形式赋值，只接收一个参数时可以是字符串--&gt;
&lt;!--failStyle可以赋值Object字面量或者JSON格式的字符串--&gt;
&lt;input type="text" name="test1"&gt;
&lt;script&gt;
    new SMValidator('form', {
        fields: {
            test1: {
                rule: [/^[A-Z]*$/i, '请输入字母'],
                required: '请输入内容',
                failCss: 'error',
                failStyle: {color:'#c3f', border:'1px solid #f00'},
                passCss: 'success',
                passStyle: {color: '#090'},
                failHtml: ["&lt;b style='color:#f00'&gt;&lt;/b&gt;", "!&lt;b style='color:#f00'&gt;&times;&lt;/b&gt;"],
            }
        }
    });
&lt;/script&gt;
                </code></pre>
                <input type="text" name="test1">
            </li>
            <li>
                <p>回到老板的需求上，四个表单一个校验数字，一个校验邮件，两个校验字母，用同样的样式，怎么复用代码才好呢？</p>
                <pre><code class="html">
&lt;!--特性可以移到fields的同级，表示所有表单共用，这时test2只需要配置校验规则--&gt;
&lt;!--rules是自定义校验规则，可以是Array和Function--&gt;
&lt;!--rules为Array时与上面提到的rule一样--&gt;
&lt;!--rules为Function时可以带多个参数function(val, param1, ...){return true || 'fail message'}--&gt;
&lt;!--test2除了Object外还可以赋值String、Array、Function--&gt;
&lt;!--test2为String时可赋与html的data-rule一样值--&gt;
&lt;!--test2为Array/Function时与Object类型里的rule一致--&gt;
&lt;!--另外特性都可以赋值为false，例如，如果test2的值为Object，且Object的failCss属性为false，则test2在校验失败时也不使用失败样式--&gt;
&lt;!--特性还可以使用SMValidator.config({...});来设置，表示所有SMValidator实例都使用这些特性--&gt;
&lt;input type="text" name="test2"&gt;
&lt;input type="text" name="test3"&gt;
&lt;input type="text" name="test4"&gt;
&lt;input type="text" name="test4"&gt;
&lt;script&gt;
    new SMValidator('form', {
        required: '请输入内容',
        failCss: 'error',
        failStyle: {color:'#c3f', border:'1px solid #f00'},
        passCss: 'success',
        passStyle: {color: '#090'},
        failHtml: ["&lt;b style='color:#f00'&gt;&lt;/b&gt;", "!&lt;b style='color:#f00'&gt;&times;&lt;/b&gt;"],
        rules: {
            onlyLetter: [/^[A-Z]*$/i, '请输入字母']
        },
        fields: {
            test2: 'required|number',
            test3: 'required|email',
            test4: 'required|onlyLetter'
        }
    });
&lt;/script&gt;
                </code></pre>
                <p>数字：<input type="text" name="test2"></p>
                <p>邮件：<input type="text" name="test3"></p>
                <p>字母：<input type="text" name="test4"></p>
                <p>字母：<input type="text" name="test4"></p>
            </li>
            <li>
                <p>
                    SMValidator目前全部特性有以下这些：<br>
                    <b>required,disinput,disblur,focus,manul,failHtml,passHtml,failStyle,failCss,passStyle,passCss,async,short</b>
                </p>
                <p>除了async和short，其他特性在教程1都介绍过。要注意的是required和async比较特别，他们是特性和规则的合体</p>
                <p>完成这些需求后，你想起老板不懂英文，但是内置规则的提示都是英文，怎么办好呢？老板已经往这边走了过来 <b><a href="tutor3.html">教程3</a></b></p>
            </li>
        </ol>
    </form>

    <script>
        hljs.initHighlightingOnLoad();

        new SMValidator('form', {
            required: '请输入内容',
            failCss: 'error',
            failStyle: {color:'#c3f', border:'1px solid #f00'},
            passCss: 'success',
            passStyle: {color: '#090'},
            failHtml: ["<b style='color:#f00'></b>", "!<b style='color:#f00'>&times;</b>"],
            rules: {
                onlyLetter: [/^[A-Z]*$/i, '请输入字母']
            },
            fields: {
                test1: {
                    rule: [/^[A-Z]*$/i, '请输入字母'],
                    required: '请输入内容',
                    failCss: 'error',
                    failStyle: {color:'#c3f', border:'1px solid #f00'},
                    passCss: 'success',
                    passStyle: {color: '#090'},
                    failHtml: ["<b style='color:#f00'></b>", "!<b style='color:#f00'>&times;</b>"]
                },
                test2: 'required|number',
                test3: 'required|email',
                test4: 'required|onlyLetter'
            }
        });
    </script>
</body>

</html>